<template>
	<view>
		<view class="nav-scroll">
			<view class="nav uni-nav">
				<view class="nav-item tab" :class="swiperIndex == 0 ? 'nav-item-act' : ''"  @click="taggleNav(0)">充值</view>
				<view class="nav-item tab" :class="swiperIndex == 1 ? 'nav-item-act' : ''"  @click="taggleNav(1)">VIP</view>
				<view class="nav-line" :style="style"></view>
			</view>
		</view>
		<view class="swiper" >
			<swiper :current="swiperIndex" :duration="300"  class="swiper-1" easing-function="linear"
				@change="swiperChange">
				<swiper-item>
					<scroll-view   scroll-y="true" class="swiper-scroll">
						<view>
							<view class="content">
								<view class="recharge">
									<view class="moneybg">
										<view class="money">
											<image src="../../static/image/recharge/zuanshi.png" mode=""></image>
											<span>999</span>
										</view>
										<view class="moneytitle">
											当前余额
										</view>
									</view>
									
									<view class="pay">
										<view class="paytype">
											<view class="paytitle">选择支付方式</view>
											<view class="paylist">
												<view class="uni-list">
													<radio-group @change="radioChange">
														<label class="uni-list-cell uni-list-cell-pd">
															<view class="left">
																<view class="img">
																	<image src="/static/image/recharge/zhifubao.png" mode=""></image>
																</view>
																<view class="name">
																	<view class="text1">支付宝</view>
																	<view class="text2">备注123</view>
																</view>
															</view>
															<view>
																<radio value="alipay" checked/>
															</view>
														</label>
														<label class="uni-list-cell uni-list-cell-pd">
															<view class="left">
																<view class="img">
																	<image src="/static/image/recharge/weixin.png" mode=""></image>
																</view>
																<view class="name">
																	<view class="text1">微信</view>
																	<view class="text2">备注456</view>
																</view>
															</view>
															<view>
																<radio value="wechat"/>
															</view>
														</label>
													</radio-group>
												</view>
											</view>
										</view>
										<view class="zaixian">
											<view class="tab-list">
												<text>选择类型</text>
											</view>
											<view class="pay-type">
												<!-- <view  class="pay-item gaoliang1"  @tap="opentype(1)"> -->
												<view :class="type == 1 ? 'pay-item gaoliang1' : 'pay-item'"  @tap="opentype(1)">
													<view class="sc">首充送58砖石</view>
													<view class="name">
														<image src="../../static/image/recharge/zuanshi.png" mode=""></image>
														<span>88</span>
													</view>
													<view class="right">
														
														<text>¥99</text>
													</view>
												</view>
												<view :class="type == 2 ? 'pay-item gaoliang1' : 'pay-item'"  @tap="opentype(2)">
													<view class="name">
														<image src="../../static/image/recharge/zuanshi.png" mode=""></image>
														<span>88</span>
													</view>
													<view class="right">
														
														<text>¥99</text>
													</view>
												</view>
												<view :class="type == 3 ? 'pay-item gaoliang1' : 'pay-item'"  @tap="opentype(3)">
													<view class="name">
														<image src="../../static/image/recharge/zuanshi.png" mode=""></image>
														<span>88</span>
													</view>
													<view class="right">
														
														<text>¥99</text>
													</view>
												</view>
												<view :class="type == 4 ? 'pay-item gaoliang1' : 'pay-item'"  @tap="opentype(4)">
													<view class="name">
														<image src="../../static/image/recharge/zuanshi.png" mode=""></image>
														<span>88</span>
													</view>
													<view class="right">
														
														<text>¥99</text>
													</view>
												</view>
												<view :class="type == 5 ? 'pay-item gaoliang1' : 'pay-item'"  @tap="opentype(5)">
													<view class="name">
														<image src="../../static/image/recharge/zuanshi.png" mode=""></image>
														<span>88</span>
													</view>
													<view class="right">
														
														<text>¥99</text>
													</view>
												</view>
												<view :class="type == 6 ? 'pay-item gaoliang1' : 'pay-item'"  @tap="opentype(6)">
													<view class="name">
														<image src="../../static/image/recharge/zuanshi.png" mode=""></image>
														<span>88</span>
													</view>
													<view class="right">
														
														<text>¥99</text>
													</view>
												</view>
											</view>
											<view class="fk" @tap="fk">
												这里是支付说明153486748953152315634786486461531531
											</view>
											<view class="paybtn">立即充值</view>
											<view class="bottom-content">苹果浏览器底部工具栏遮挡了内容，这里顶上去，无视这里的内容。</view>
										</view>
									</view>
									
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<scroll-view :lower-threshold="80" :refresher-triggered="refreStatus"
						@refresherrefresh="handleRefre" :refresher-enabled="true" class="swiper-scroll" scroll-y="true"
						@scrolltolower="swiperScrollLower">
						<view>
							<view class="content">
								
							</view>
						</view>
					</scroll-view>
				</swiper-item>
				
			</swiper>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperIndex: 0, //当前的swiperindex
				navItemWidth: '', //选中下划线的宽度
				navItemLeft: 0, //选中下划线的显示位置
				scrollToLeft: 0, //scrollview需要滚动的距离
				navInfos: [], //所有navitem的节点信息
				parentLeft: 0, //nav盒子的节点信息
				componentWidth: 0, //nav盒子的宽度
				refreStatus: false,
				selectedPaymentMethod:'',
				type:'',
				items: [{
						value: "alipay",
						name: '支付宝',
						checked: true
					},
					{
						value: "wechat",
						name: '微信',
						checked: false
					}
				]
			};
		},
		onLoad() {
			// 禁用苹果浏览器左滑返回
			uni.hideBackHome = true;
		},
		onUnload() {
			// 恢复苹果浏览器左滑返回（当页面销毁时）
			uni.hideBackHome = false;
		},
		computed: {
			style() {
				return `width:${this.navItemWidth}px; left:${this.navItemLeft}px`;
			}
		},
		mounted() {
			this.init();
		},
		methods: {
			// 获取dom信息
			init() {
				const query = uni.createSelectorQuery().in(this);
				query.select('.uni-nav').fields({ rect: true, size: true }, res => {
					this.parentLeft = res.left;
					this.componentWidth = res.width;
					// console.log('res==>', res);
				});
				query.selectAll('.nav-item').fields({ rect: true, size: true }, data => {
					data.forEach((item, index) => {
						if (index == 0) {
							this.navItemWidth = item.width;
							this.navItemLeft = item.left;
						}
						this.navInfos.push({ width: item.width, left: item.left });
					});
				});
				query.exec();
			},
			// 点击导航切换swiper
			taggleNav(val) {
				this.swiperIndex = val;
			},
			opentype(id) {
				this.type = id;
			},
			// 滚动tabs以及移动下划线
			scrollDom() {
				let info = this.navInfos[this.swiperIndex];
				let offsetLeft = info.left - this.parentLeft;
				let scrollLeft = offsetLeft - (this.componentWidth - info.width) / 2;
				this.scrollToLeft = scrollLeft < 0 ? 0 : scrollLeft;
				this.navItemLeft = this.navInfos[this.swiperIndex].left;
				setTimeout(() => {
					this.navItemWidth = info.width;
				}, 50);
			},
			radioChange(e) {
				this.selectedPaymentMethod = e.detail.value;
			},
			// swiper的index变动
			swiperChange(e) {
				this.swiperIndex = e.detail.current;
				this.scrollDom();
				// this.$emit('currentIndex', this.swiperIndex);
			},
			// tabs-scrollview触底
			handleScroll(e) {
				// this.scrollDom();
			},
			// swiper-ScrollLower触底
			swiperScrollLower() {
				// uni.showToast({
				// 	icon: 'none',
				// 	title: `此时为${this.list[this.swiperIndex].title}触底`
				// });
				// setTimeout(() => {
				// 	this.getData();
				// }, 500);
			},
			// 生成列表数据
			getData() {
				// uni.showLoading({
				// 	title: '加载中'
				// });
				// setTimeout(() => {
				// 	for (let index = 0; index < 10; index++) {
				// 		let arr = this.list[this.swiperIndex].content;
				// 		this.$set(arr, arr.length, Math.random() + '-' + index + this.list[this.swiperIndex]
				// 		.title);
				// 	}
				// 	uni.hideLoading();
				// }, 1000);
				// console.log(this.list[this.swiperIndex]);
			},
			// 下拉事件
			handleRefre() {
				// this.refreStatus = true;
				// uni.showLoading({
				// 	title: '下拉加载中'
				// });
				// setTimeout(() => {
				// 	this.list[this.swiperIndex].content = [];
				// 	for (var i = 0; i < 5; i++) {
				// 		this.list[this.swiperIndex].content.push([this.list[this.swiperIndex].title + '下拉-' + i]);
				// 	}
				// 	uni.hideLoading();
				// }, 1000);
				// setTimeout(() => {
				// 	this.refreStatus = false;
				// }, 1000);
			}
		}
	};
</script>

<style lang="scss">
	.nav-item {
		display: inline-block;
		margin: 0 16upx;
		text-align: center;
		transition: color 0.3s ease;
	}

	.nav {
		white-space: nowrap;
		position: fixed;
		// height: 80upx;
		// padding: 20upx 0;
		z-index: 999;
		
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #ffffff;
		padding: 20rpx 20rpx;
	}

	/* #ifndef APP-NVUE */
	::-webkit-scrollbar {
		display: none;
	}

	/* #endif */

	/* #ifdef H5 */
	// 通过样式穿透，隐藏H5下，scroll-view下的滚动条
	scroll-view ::v-deep ::-webkit-scrollbar {
		display: none;
	}

	/* #endif */
	.tab {
		font-size: 40rpx;
		color: #3D3D3D;
		// margin-left: 30rpx;
	}
	.nav-item-act {
		color: #1D1D1D;
		font-size: 40rpx;
		font-weight: bold;
		// font-weight: bolder;
	}

	.nav-line {
		position: absolute;
		bottom: 0;
		height: 10upx;
		border-radius: 10upx;
		background-color: #C089FF;
		transition: left 0.3s ease;
	}

	swiper {
		height: 100vh;
		// height: calc(100vh - 100upx);
	}
	.swiper{
		
		    // position: relative;
		    // top: 120rpx;

		margin-top: 100rpx;
	}
	swiper-item {
		// text-align: center;
		color: #000;
		// position: relative;
		// background-color: skyblue;
		// color: #fff;
	}

	.swiper-item {
		// overflow-y: scroll;
		height: 100%;
		overflow-y: auto;
	}


	.swiper-scroll {
		height: 100%;
	}
</style>
<style lang="scss">
	.bottom-content {
		color: #ffffff;
		font-size: 60rpx;
	    padding: 50rpx; /* 调整底部内边距的数值，确保底部内容不被遮挡 */
	}
	page{
		height: 100%;
	}
	.nav-scroll{
		width: 100%;
		background: #ffffff;
		height: 100rpx;
		z-index: 999;
		position: fixed;
		    top: 0;
	}
	.recharge{
		width: 100%;
		height: 100%;
		overflow-y: auto;
		// padding: 20rpx;
		.moneybg{
			padding: 68rpx;
			background-image: url('@/static/image/recharge/bj.png');
			background-size: 100%;
			.money{
				display: flex;
				align-items: center;
				image{
					width: 40rpx;
					height: 40rpx;
				}
				span{
					margin-left: 10rpx;
					font-size: 48rpx;
					color: #FFFFFF;
				}
			}
			.moneytitle{
				margin-top: 10rpx;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}
		.pay{
			// height: 100vh;
			// overflow-y: auto;
			background-color: #FFFFFF;
			border-radius: 16rpx 16rpx 0 0;
			margin-top: -10rpx;
			.paytype{
				.paytitle{
					color: #3D3D3D;
					font-size: 32rpx;
					padding: 30rpx;
					font-weight: bold;
				}
			}
			.uni-list {
			    background-color: #FFFFFF;
			    position: relative;
			    width: 100%;
			    display: flex;
			    flex-direction: column;
				.uni-list-cell-pd {
				    padding: 11px 15px;
				}
				.uni-list-cell {
				    position: relative;
				    display: flex;
				    flex-direction: row;
				    justify-content: space-between;
				    align-items: center;
					.left{
						display: flex;
						align-items: center;
						justify-content: start;
						.img{
							width: 80rpx;
							height: 80rpx;
							image{
								width: 100%;
								height: 100%;
							}
						}
						.name{
							margin-left: 20rpx;
							.text1{
								font-size: 32rpx;
								color: #3D3D3D;
							}
							.text2{
								font-size: 24rpx;
								color: #999999;
							}
						}
					}
				}
			}
			.zaixian {
				// height: 100vh;
				width: 686rpx;
				// padding-bottom: 50rpx;
				border-radius: 8rpx;
				margin: 32rpx auto;
				
				.fk{
					padding: 20rpx 0;
					color: #666666;
					font-size: 24rpx;
				}
				.paybtn{
					background-image: linear-gradient( 
					      270deg,
					      rgba(244, 185, 107, 1) 0,
					      rgba(249, 222, 141, 1) 100%
					    );
					color: #744A16;
					font-size: 32rpx;
					font-weight: bold;
					text-align: center;
					padding: 30rpx 0;
				}
				.tab-list{
					    color: #3D3D3D;
					    font-size: 16px;
					    padding: 15px 0;
					    font-weight: bold;
				}
				.title {
					text-align: center;
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: rgba(198, 160, 76, 1);
					padding: 28rpx 0;
				}
			
				.pay-type {
					display: flex;
					flex-wrap: wrap;
					box-sizing: border-box;
				}
				.gaoliang1{
					background-image: linear-gradient(
					          180deg,
					          rgba(255, 235, 199, 1) 2.857143%,
					          rgba(245, 224, 188, 1) 100%
					        ) !important;
					  .name{
						  color: #15120D !important;
					  }
					  .right {
						  text:first-child {
						  	color: #744A16 !important;
						  }
						  
						  text:last-child {
						  	color: #A98348 !important;
						  }
					  }
				}
				.pay-item {
					// flex-shrink: :0;
					width: 216rpx;
					height: 216rpx;
					border-radius: 16rpx;
					margin: 0rpx 12rpx 14rpx 0;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					background: #F7F7F7;
					.sc{
						color:#F5D99F ;
						background-color: #454850;
						border-radius: 8rpx;
						padding: 2rpx 8rpx;
						position: relative;
						top: -56rpx;
						left: -24rpx;
						font-size: 24rpx;
					}
					.name {
						display: flex;
						align-items: center;
						padding-bottom: 10rpx;
						image{
						  width: 50rpx;
						  height: 50rpx;
						}
						span{
							font-size: 48rpx;
							color: #744A16!important;
							font-weight: bold;
						}
					}
			
					.right {
						// width: 220rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: space-between;
						text{
							font-size: 24rpx;
							color: #7B7B7B;
						}
					}
				}
				.gaoliang {
					background: rgba(255, 248, 232, 1) !important;
				}
			}
		}
		
		
	}
	
	/deep/ uni-radio .uni-radio-input-checked {
	  background-color: #44484F !important;
	  border-color: #44484F !important;
	}
	.content {
		// width: 750rpx;
	}
</style>